<script>
import FormCom from "../formContainer/index";
import { Message } from "element-ui";
import axios from "axios";
import _ from "loadsh";
export default {
  name: "modalCom",
  components: { FormCom },
  props: {
    request: Function,
    config: [Array, Object],
    propsTable: Object,
    options: Object,
    editData: Object,
    selectList: Array,
  },
  data() {
    return {
      form: {},
      tableData: [],
      page: 1,
      pageSize: 10,
      visible: false,
      total: 0,
      configForm: {},
    };
  },
  methods: {
    // 新增或者修改
    async submit(val) {
      console.log(this.editData);
      if (this.editData?.id) val.id = this.editData?.id;
      const res = await axios.post(this.config.addApi, val);
      if (res.data.code === 200) {
        Message.success(this.editData?.id ? "修改成功" : "新增成功");
        this.$emit("addSuccess");
        this.close();
      }
    },
    oncalcel() {
      this.visible = false;
    },
    close() {
      this.$refs.formCom.cancel();
      this.visible = false;
    },
    deleteConfim() {
      if (this.selectList.length === 0) {
        this.$message({
          type: "warning",
          message: "请至少选择一条数据!",
        });
        return;
      }
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delete();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async delete() {
      const res = await axios.post(
        this.configForm.deleteApi,
        this.selectList?.map((e) => e?.id)
      );
      if (res?.data?.code === 200) {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.$emit("addSuccess");
      }
    },
  },
  watch: {
    editData: {
      handler: function (val) {
        if (val && !this.configForm.setTitle) {
          this.configForm.title =
            (this.editData?.id ? "修改" : "新增") + this.configForm.title;
          this.configForm.formConfig.okTxt = this.editData?.id
            ? "修改"
            : "新增";
          this.configForm.setTitle = true;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.configForm = _.cloneDeep(this.config);
    console.log(this.editData, "----");
  },
  render() {
    return (
      <div class="modalcon">
        <div class="btnGruop">
          {this.configForm.hasAdd ? (
            <el-button
              type="success"
              onClick={() => (this.visible = true)}
              size="small"
              icon="el-icon-plus"
            >
              新增
            </el-button>
          ) : (
            ""
          )}
          {this.configForm.hasDelete ? (
            <el-button
              size="small"
              onClick={this.deleteConfim}
              icon="el-icon-delete"
              type="info"
            >
              删除
            </el-button>
          ) : (
            ""
          )}
        </div>
        <el-dialog
          title={this.configForm.title || "新增用户"}
          visible={this.visible}
          modal-append-to-body={false}
          width="30%"
          before-close={this.close}
        >
          <FormCom
            ref="formCom"
            config={this.configForm?.formConfig}
            on-submitCancel={this.oncalcel}
            on-submitForm={this.submit}
            data={this.editData}
          ></FormCom>
        </el-dialog>
      </div>
    );
  },
};
</script>

<style scoped lang="scss">
@import url(./index.scss);

.modalcon {
  padding: 0 32px;

  .pageLeft {
    margin-top: 18px;

    .btnGruop {
      > div {
        margin-right: 20px;
      }
    }
  }

  ::v-deep .el-dialog__body {
    padding: 0 20px;
  }
}
</style>
